import React, { Component } from 'react'
// CSSTransition 进行元素过渡，它也是其它过渡形式都要包裹所用的
//   + in： boolean true进场，false出场，此属性只有在CSSTransition独立使用时才必须
//   + key：唯一值，此属性只有CSSTransition和别的过渡组件配合时必须使用
//   + timeout：过渡切换样式名称它的时长 一般要求和动画时长最好一致
//   + classNames：string | object
//     - string 指定过渡动画样式名称的前缀 classNames='aa'  .aa_xxx
//     - object 指定过渡动画每个阶段的具体的样式名称
//   + unmountOnExit 如果为true则在动画离开完成后，删除当前绑定的dom节点
//   + appear 第1次进入到元素或页面是不会有过渡，如果设置了appear为true，则在第1次也会有过渡
//   + 若干个过渡过程的事件 onEnter onExit
// 注：CSSTransition它里能有一个子元素
// 注：如果元素过渡动画中有形变，则一定要设置一下它的块，为inline-block

import { CSSTransition } from 'react-transition-group'

class Index extends Component {
  state = {
    show: true
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState((state) => ({
              show: !state.show
            }))
          }}
        >
          显示或隐藏
        </button>
        <br />
        <CSSTransition
          in={this.state.show}
          timeout={600}
          classNames={{
            enter: 'animate__animated',
            enterActive: 'animate__backInDown',
            exit: 'animate__animated',
            exitActive: 'animate__backOutUp'
          }}
          unmountOnExit
        >
          <div style={{ display: 'inline-block' }}>
            <div>你好react</div>
            <div>你好react</div>
            <div>你好react</div>
            <div>你好react</div>
          </div>
        </CSSTransition>
      </div>
    )
  }
}

export default Index
